import React, { useState } from "react";
import { Button } from "antd-mobile";

import "./index.less";

// console.log(React);

/* 
    函数组件的每一次渲染(或者是更新)，都是把函数(重新)执行，产生一个全新的"私有上下文"!
      + 内部的代码也需要重新执行
      + 涉及的函数需要重新的构建 { 这些函数的作用域(函数执行的上级上下文)， 是每一次执行DEMO产生的闭包 }
      + 每执行一次DEMO函数，也会把useState重新执行，但是：
          + 执行useState，只有第一次，设置的初始值会生效，其余以后再执行，获取的状态都是最新的值 [而不是初始值]
          + 返回的修改状态的方法，每一次都是返回一个新的
*/

// var counter = 0;
// function fn() {
//   var counter = 0;
//   counter += 1;
//   return counter;
// }
// fn();
// fn();
// fn();
// console.log(fn())

const Test = () => {
  const [num, setNum] = useState(0);

  const handle = () => setNum(num + 10);

  return (
    <div className="demo">
      <div>{num}</div>
      <Button onClick={handle}>新增</Button>
    </div>
  );
};

export default Test;
